<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.3.0">

  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha256-HtsXJanqjKTc8vVQjO4YMhiqFoXkfBsjBWcX91T1jr8=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/themes/blue/pace-theme-minimal.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js" integrity="sha256-gqd7YTjg/BtfqWSwsJOvndl0Bxc8gFImLEkXQT8+qj0=" crossorigin="anonymous"></script>

<script class="next-config" data-name="main" type="application/json">{"hostname":"example.com","root":"/","images":"/images","scheme":"Gemini","darkmode":false,"version":"8.17.1","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":false,"style":null},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>

    <meta name="description" content="这里简单记录下本次操作的步骤，方便日后查看。 安装Hexo 官网：https:&#x2F;&#x2F;hexo.io&#x2F;zh-cn&#x2F;  什么是 Hexo？Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo+NexT+码云搭建个人博客">
<meta property="og:url" content="http://example.com/2019/05/23/Hexo-NexT-%E7%A0%81%E4%BA%91%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/index.html">
<meta property="og:site_name" content="幸福的小羊">
<meta property="og:description" content="这里简单记录下本次操作的步骤，方便日后查看。 安装Hexo 官网：https:&#x2F;&#x2F;hexo.io&#x2F;zh-cn&#x2F;  什么是 Hexo？Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141504796.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141655803.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141658791.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141659244.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141700557.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141701154.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141702043.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141702424.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141704964.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141705658.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141706137.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141707621.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141707029.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141857396.png">
<meta property="og:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141904398.png">
<meta property="article:published_time" content="2019-05-23T06:44:00.000Z">
<meta property="article:modified_time" content="2023-07-14T11:11:15.495Z">
<meta property="article:author" content="zhaowg">
<meta property="article:tag" content="java,spring">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/zhaowg3/images/raw/blog/202307141504796.png">


<link rel="canonical" href="http://example.com/2019/05/23/Hexo-NexT-%E7%A0%81%E4%BA%91%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://example.com/2019/05/23/Hexo-NexT-%E7%A0%81%E4%BA%91%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/","path":"2019/05/23/Hexo-NexT-码云搭建个人博客/","title":"Hexo+NexT+码云搭建个人博客"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Hexo+NexT+码云搭建个人博客 | 幸福的小羊</title>
  








  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">幸福的小羊</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">蓝天，白云，青草地</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类<span class="badge">2</span></a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档<span class="badge">3</span></a></li>
  </ul>
</nav>




</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%89%E8%A3%85Hexo"><span class="nav-number">1.</span> <span class="nav-text">安装Hexo</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-Hexo%EF%BC%9F"><span class="nav-number">1.1.</span> <span class="nav-text">什么是 Hexo？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E8%A3%85Hexo-1"><span class="nav-number">1.2.</span> <span class="nav-text">安装Hexo</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E6%96%87%E4%BB%B6"><span class="nav-number">1.3.</span> <span class="nav-text">初始化文件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%AF%E5%8A%A8Hexo"><span class="nav-number">1.4.</span> <span class="nav-text">启动Hexo</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88Hexo%E7%BD%91%E7%AB%99"><span class="nav-number">1.5.</span> <span class="nav-text">浏览Hexo网站</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AE%89%E8%A3%85NexT%E4%B8%BB%E9%A2%98"><span class="nav-number">2.</span> <span class="nav-text">安装NexT主题</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%8B%E8%BD%BDNext%E4%B8%BB%E9%A2%98"><span class="nav-number">2.1.</span> <span class="nav-text">下载Next主题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8Next%E4%B8%BB%E9%A2%98"><span class="nav-number">2.2.</span> <span class="nav-text">使用Next主题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BF%AE%E6%94%B9%E4%B8%BB%E9%A2%98%E6%A0%B7%E5%BC%8F"><span class="nav-number">2.3.</span> <span class="nav-text">修改主题样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BF%AE%E6%94%B9%E7%BD%91%E7%AB%99%E5%90%8D%E7%A7%B0"><span class="nav-number">2.4.</span> <span class="nav-text">修改网站名称</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A2%9E%E5%8A%A0%E5%A4%B4%E5%83%8F"><span class="nav-number">2.5.</span> <span class="nav-text">增加头像</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%93%E5%BC%80%E8%8F%9C%E5%8D%95%E9%A1%B9"><span class="nav-number">2.6.</span> <span class="nav-text">打开菜单项</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%96%B0%E5%BB%BA%E9%A1%B5%E9%9D%A2"><span class="nav-number">2.7.</span> <span class="nav-text">新建页面</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%96%87%E7%AB%A0%E5%B1%95%E7%A4%BAReadme%E6%8C%89%E9%92%AE"><span class="nav-number">2.8.</span> <span class="nav-text">文章展示Readme按钮</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%96%87%E7%AB%A0%E6%A0%87%E9%A2%98%E5%89%8D%E8%A8%80"><span class="nav-number">2.9.</span> <span class="nav-text">文章标题前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%93%E5%BC%80%E5%8F%8B%E6%83%85%E9%93%BE%E6%8E%A5"><span class="nav-number">2.10.</span> <span class="nav-text">打开友情链接</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%93%E5%BC%80%E7%A4%BE%E4%BA%A4%E5%B9%B3%E5%8F%B0"><span class="nav-number">2.11.</span> <span class="nav-text">打开社交平台</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-number">2.12.</span> <span class="nav-text">主题配置文件</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%91%E5%B8%83%E5%88%B0%E7%A0%81%E4%BA%91page"><span class="nav-number">3.</span> <span class="nav-text">发布到码云page</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BF%9D%E5%AD%98%E5%8E%9F%E5%A7%8B%E6%96%87%E6%A1%A3"><span class="nav-number">4.</span> <span class="nav-text">保存原始文档</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#PicGo-%E7%A0%81%E4%BA%91%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A"><span class="nav-number">5.</span> <span class="nav-text">PicGo+码云搭建图床</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="zhaowg"
      src="/images/sheep.jpg">
  <p class="site-author-name" itemprop="name">zhaowg</p>
  <div class="site-description" itemprop="description">个人博客，分享技术和日常生活</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">3</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">2</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">2</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>

        </div>
      </div>
        <div class="back-to-top animated" role="button" aria-label="返回顶部">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>
    </div>

    
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://example.com/2019/05/23/Hexo-NexT-%E7%A0%81%E4%BA%91%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/sheep.jpg">
      <meta itemprop="name" content="zhaowg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="幸福的小羊">
      <meta itemprop="description" content="个人博客，分享技术和日常生活">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="Hexo+NexT+码云搭建个人博客 | 幸福的小羊">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Hexo+NexT+码云搭建个人博客
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2019-05-23 14:44:00" itemprop="dateCreated datePublished" datetime="2019-05-23T14:44:00+08:00">2019-05-23</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2023-07-14 19:11:15" itemprop="dateModified" datetime="2023-07-14T19:11:15+08:00">2023-07-14</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/" itemprop="url" rel="index"><span itemprop="name">搭建博客</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><p>这里简单记录下本次操作的步骤，方便日后查看。</p>
<h1 id="安装Hexo"><a href="#安装Hexo" class="headerlink" title="安装Hexo"></a>安装Hexo</h1><blockquote>
<p>官网：<a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/">https://hexo.io/zh-cn/</a></p>
</blockquote>
<h2 id="什么是-Hexo？"><a href="#什么是-Hexo？" class="headerlink" title="什么是 Hexo？"></a>什么是 Hexo？</h2><p>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 <a target="_blank" rel="noopener" href="http://daringfireball.net/projects/markdown/">Markdown</a>（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</p>
<span id="more"></span>
<h2 id="安装Hexo-1"><a href="#安装Hexo-1" class="headerlink" title="安装Hexo"></a>安装Hexo</h2><ul>
<li>先安装Git。</li>
<li>再安装Node.js</li>
<li>通过下面命令安装Hexo</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>

<h2 id="初始化文件"><a href="#初始化文件" class="headerlink" title="初始化文件"></a>初始化文件</h2><p>安装 Hexo 完成后，执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。<br>如下是我将hexo安装在了&#x2F;Users&#x2F;zhaoweigang&#x2F;Documents&#x2F;myblog</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo init /Users/zhaoweigang/Documents/myblog</span><br><span class="line">cd /Users/zhaoweigang/Documents/myblog</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>

<p><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141504796.png" alt="初始化文件"></p>
<h2 id="启动Hexo"><a href="#启动Hexo" class="headerlink" title="启动Hexo"></a>启动Hexo</h2><p>使用如下命令启动Hexo。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo s -d</span><br></pre></td></tr></table></figure>

<p>如果端口已被占用，可以使用-p 重新指定，或者使用如下命令查询4000端口当前的PID，kill掉</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">lsof -i:4000</span><br></pre></td></tr></table></figure>

<h2 id="浏览Hexo网站"><a href="#浏览Hexo网站" class="headerlink" title="浏览Hexo网站"></a>浏览Hexo网站</h2><p>打开地址：<a target="_blank" rel="noopener" href="http://localhost:4000/">http://localhost:4000/</a><br><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141655803.png" alt="原始网站界面"></p>
<p>此时界面有点丑，下面安装nexT美化界面。</p>
<h1 id="安装NexT主题"><a href="#安装NexT主题" class="headerlink" title="安装NexT主题"></a>安装NexT主题</h1><blockquote>
<p>官网：<a target="_blank" rel="noopener" href="https://theme-next.js.org/docs/getting-started/">NexT官网</a></p>
</blockquote>
<h2 id="下载Next主题"><a href="#下载Next主题" class="headerlink" title="下载Next主题"></a>下载Next主题</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd /Users/zhaoweigang/Documents/myblog</span><br><span class="line">git clone https://github.com/next-theme/hexo-theme-next themes/next</span><br></pre></td></tr></table></figure>

<h2 id="使用Next主题"><a href="#使用Next主题" class="headerlink" title="使用Next主题"></a>使用Next主题</h2><blockquote>
<p>备注：<br>修改了myblog&#x2F;_config.yml需要重启，修改了mythemes&#x2F;next&#x2F;_config.yml不需要重启，刷新页面即可</p>
</blockquote>
<p>打开myblog&#x2F;_config.yml。<br>修改：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">theme: next</span><br></pre></td></tr></table></figure>

<p>重新启动hexo。打开地址：<a target="_blank" rel="noopener" href="http://localhost:4000/">http://localhost:4000/</a><br><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141658791.png" alt="next原始界面"></p>
<h2 id="修改主题样式"><a href="#修改主题样式" class="headerlink" title="修改主题样式"></a>修改主题样式</h2><p>打开myblog&#x2F;themes&#x2F;next&#x2F;_config.yml，找到scheme。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"># Schemes</span><br><span class="line">#scheme: Muse ##注释掉默认的样式</span><br><span class="line">#scheme: Mist</span><br><span class="line">#scheme: Pisces</span><br><span class="line">scheme: Gemini ##打开该样式</span><br></pre></td></tr></table></figure>

<p>刷新浏览器<br><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141659244.png" alt="Gemini界面"></p>
<h2 id="修改网站名称"><a href="#修改网站名称" class="headerlink" title="修改网站名称"></a>修改网站名称</h2><p>打开myblog&#x2F;_config.yml。找到Site</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"># Site</span><br><span class="line">title: 幸福的小羊 ##网站标题</span><br><span class="line">subtitle: &#x27;蓝天，白云，青草地&#x27; ##网站副标题</span><br><span class="line">description: &#x27;个人博客，分享技术和日常生活&#x27; ##网站描述</span><br><span class="line">keywords: java,spring</span><br><span class="line">author: zhaowg ##您的名字</span><br><span class="line">language: zh-CN</span><br><span class="line">timezone: &#x27;Asia/Shanghai&#x27;</span><br></pre></td></tr></table></figure>

<p>重新启动，效果如下。<br><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141700557.png" alt="幸福的小羊网站"></p>
<h2 id="增加头像"><a href="#增加头像" class="headerlink" title="增加头像"></a>增加头像</h2><ol>
<li>在myblog&#x2F;source下新建images文件夹。</li>
<li>选择一张图片放到给文件夹，我选择的sheep.jpg</li>
<li>修改myblog&#x2F;themes&#x2F;next&#x2F;_config.yml中的avatar。</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">avatar:</span><br><span class="line">  url: /images/sheep.jpg ## 头像地址</span><br><span class="line">  rounded: true ## true 是否圆角</span><br><span class="line">  rotated: true ## 鼠标经过是否旋转</span><br></pre></td></tr></table></figure>

<p>刷新网页<br><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141701154.png" alt="新增头像"></p>
<h2 id="打开菜单项"><a href="#打开菜单项" class="headerlink" title="打开菜单项"></a>打开菜单项</h2><p>打开myblog&#x2F;themes&#x2F;next&#x2F;_config.yml，扎到menu：将注释掉的打开。<br>格式：菜单名称：路径 || 图标</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line">  home: / || fa fa-home</span><br><span class="line">  about: /about/ || fa fa-user</span><br><span class="line">  tags: /tags/ || fa fa-tags</span><br><span class="line">  categories: /categories/ || fa fa-th</span><br><span class="line">  archives: /archives/ || fa fa-archive</span><br><span class="line">  #schedule: /schedule/ || fa fa-calendar</span><br><span class="line">  #sitemap: /sitemap.xml || fa fa-sitemap</span><br><span class="line">  #commonweal: /404/ || fa fa-heartbeat</span><br></pre></td></tr></table></figure>

<p>对应的中文名称在myblog&#x2F;themes&#x2F;next&#x2F;languages&#x2F;zh-CN.yml中有配置，如果后续增加自定义的菜单，也需要在zh-CN.yml中配置对应的中文名称。<br><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141702043.png" alt="打开菜单界面"></p>
<p>显示文章数量，将如下配置设置为true</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">menu_settings:</span><br><span class="line">  badges: true</span><br></pre></td></tr></table></figure>

<p><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141702424.png" alt="显示文章数量"></p>
<p>此时点击菜单下非首页目录都报错，因为不存在。</p>
<h2 id="新建页面"><a href="#新建页面" class="headerlink" title="新建页面"></a>新建页面</h2><p>新建标签、关于和分类页面。<br>执行如下命令：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo new page tags</span><br><span class="line">hexo new page about</span><br><span class="line">hexo new page categories</span><br></pre></td></tr></table></figure>

<p><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141704964.png" alt="新建页面"></p>
<p>修改tags&#x2F;index.md</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 标签</span><br><span class="line">date: 2023-07-13 18:26:49</span><br><span class="line">type: tags</span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<p>修改categories&#x2F;index.md</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 分类</span><br><span class="line">date: 2023-07-13 18:27:24</span><br><span class="line">type: categories</span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<p>此时点击分类和标签就可以看到界面了。</p>
<h2 id="文章展示Readme按钮"><a href="#文章展示Readme按钮" class="headerlink" title="文章展示Readme按钮"></a>文章展示Readme按钮</h2><p>打开myblog&#x2F;source&#x2F;_posts&#x2F;hello-world.md 增加<!-- more --><br><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141705658.png" alt="代码中增加more"></p>
<p><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141706137.png" alt="more界面"></p>
<h2 id="文章标题前言"><a href="#文章标题前言" class="headerlink" title="文章标题前言"></a>文章标题前言</h2><blockquote>
<p>官方文档：<a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/front-matter">https://hexo.io/zh-cn/docs/front-matter</a></p>
</blockquote>
<p>打开myblog&#x2F;source&#x2F;_posts&#x2F;hello-world.md 增加</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 你好啊，世界 ## 文章标题</span><br><span class="line">date: 2014/7/13 20:46:25 ## 创建日期</span><br><span class="line">updated: 2015/7/13 20:46:25 ##更新日期</span><br><span class="line">tags: ##增加分页</span><br><span class="line">- spring</span><br><span class="line">- java</span><br><span class="line">categories: 搭建教程 ## 增加分类</span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<p>备注：<br>文章中增加了tags和categories，在网站的标签和分类下会自动增加。<br><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141707621.png" alt="标题前言"></p>
<h2 id="打开友情链接"><a href="#打开友情链接" class="headerlink" title="打开友情链接"></a>打开友情链接</h2><p>打开themes&#x2F;next&#x2F;_config.yml，找到links</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"># Blog rolls</span><br><span class="line">links_settings:</span><br><span class="line">  icon: fa fa-globe</span><br><span class="line">  # Available values: block | inline</span><br><span class="line">  layout: block</span><br><span class="line"></span><br><span class="line">links:</span><br><span class="line">  baidu: https://www.baidu.com</span><br></pre></td></tr></table></figure>

<h2 id="打开社交平台"><a href="#打开社交平台" class="headerlink" title="打开社交平台"></a>打开社交平台</h2><p>打开themes&#x2F;next&#x2F;_config.yml，找到social</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">social:</span><br><span class="line">  GitHub: https://github.com/yourname || fab fa-github</span><br><span class="line">  E-Mail: mailto:yourname@gmail.com || fa fa-envelope</span><br><span class="line">  Weibo: https://weibo.com/yourname || fab fa-weibo</span><br></pre></td></tr></table></figure>

<p><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141707029.png" alt="友情链接界面"></p>
<p>其他插件请看Next官网。</p>
<h2 id="主题配置文件"><a href="#主题配置文件" class="headerlink" title="主题配置文件"></a>主题配置文件</h2><p>目前修改主题的配置文件是直接在themes&#x2F;next&#x2F;_config.yml中，如果后续更新next则会造成冲突，所以还有另一种方式。<br>详见：<a target="_blank" rel="noopener" href="https://theme-next.js.org/docs/getting-started/configuration.html">https://theme-next.js.org/docs/getting-started/configuration.html</a><br>在myblog下新建_config.[name].yml，在本次项目中则为：_config.next.yml，将next主题的config.yml中内容全部移到myblog&#x2F;_config.next.yml即可。</p>
<h1 id="发布到码云page"><a href="#发布到码云page" class="headerlink" title="发布到码云page"></a>发布到码云page</h1><ol>
<li><p>在码云新建仓库，仓库名称为你个人主页下的@后面的名称，非姓名。<br><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141857396.png"></p>
</li>
<li><p>创建完仓库后，到仓库管理管理界面将”是否开源“选择开源</p>
</li>
<li><p>复制仓库地址。<br><img src="https://gitee.com/zhaowg3/images/raw/blog/202307141904398.png"></p>
</li>
<li><p>修改myblog&#x2F;_config.yml配置文件</p>
</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: ##你的仓库地址：例如：https://gitee.com/zhaowg3/zhsd.git</span><br><span class="line">  branch: ##你的分支，例如：master</span><br></pre></td></tr></table></figure>

<ol start="5">
<li>在myblog文件夹下执行如下命令：</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>

<ol start="6">
<li>部署静态代码到码云</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g ##重新生成静态文件，hexo将静态文件放到了myblog/public</span><br><span class="line">hexo d ##将myblog/public下面的静态文件提交到码云</span><br></pre></td></tr></table></figure>

<h1 id="保存原始文档"><a href="#保存原始文档" class="headerlink" title="保存原始文档"></a>保存原始文档</h1><p>此时所有原始数据都在本地，包括_config.yml和文章，新建的页面等，如果更换电脑则需要重新配置，主要是这些原始内容丢了，为此将该信息同步到码云。</p>
<ol>
<li>在码云新建仓库，例如blog。设置为私人即可。</li>
<li>本地clone该仓库。</li>
<li>将clone仓库的.git文件，复制到本地hexo搭建的博客下。</li>
<li>修改.gitignore，排除变动文件：</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">.DS_Store</span><br><span class="line">Thumbs.db</span><br><span class="line">db.json</span><br><span class="line">*.log</span><br><span class="line">node_modules/</span><br><span class="line">public/</span><br><span class="line">.deploy*/</span><br><span class="line">_multiconfig.yml</span><br><span class="line">.vscode/</span><br><span class="line">themes/</span><br></pre></td></tr></table></figure>

<p>现在就可以将当前网站的数据提交到码云了，不用担心找不到了。</p>
<h1 id="PicGo-码云搭建图床"><a href="#PicGo-码云搭建图床" class="headerlink" title="PicGo+码云搭建图床"></a>PicGo+码云搭建图床</h1><p>目前编写的文章中，使用到图片的时候，一般都是找个平台将图片上传，获取到对应的链接，例如简书等，但是万一后续简书增加了防盗链或者清除了，则图片就无法展示了，所以最好有一个自己的图床。</p>
<p>推荐文章：<a target="_blank" rel="noopener" href="https://www.ngui.cc/el/3150527.html?action=onClick">利用码云 gitee + PicGo 搭建个人免费图床</a></p>
<p>下载最新的PicGo:<br>地址：<a target="_blank" rel="noopener" href="https://github.com/Molunerfinn/PicGo/">https://github.com/Molunerfinn/PicGo/</a><br>推荐使用山东大学镜像站下载：<a target="_blank" rel="noopener" href="https://mirrors.sdu.edu.cn/github-release/Molunerfinn_PicGo/">https://mirrors.sdu.edu.cn/github-release/Molunerfinn_PicGo/</a></p>

    </div>

    
    
    

    <footer class="post-footer">

        

          <div class="post-nav">
            <div class="post-nav-item">
            </div>
            <div class="post-nav-item">
                <a href="/2021/05/03/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%EF%BC%9A%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84%E5%8F%91%E5%B1%95%E5%8E%86%E7%A8%8B/" rel="next" title="一文读懂：系统架构发展历程">
                  一文读懂：系统架构发展历程 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 
    <span itemprop="copyrightYear">2023</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">zhaowg</span>
  </div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>

  




  <script src="/js/third-party/pace.js"></script>


  





</body>
</html>
